@charset "utf-8";

/* 引入重置样式 */
//@import "./css/reset.css;

// REM
@function r($px){
    @return ($px/40) * 1rem;    
}

// 减半
@function half($px){
    @return ($px/2) * 1px;    
}


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html,body{
    height: 100%;
    position: relative;
}


//头部
header{  
    position: absolute;
    top: 0;
    width: r(750);
    height: half(105);
    padding-top:22px;
    padding-left: half(22);
    padding-right: 11px;
    box-sizing: border-box;
        .Back{ 
          
            width: half(123);
            height: half(57);
               background-color: #ffffff;
                border-radius: half(20);
                border: solid 1px #ff9344;
                p{ 
                    width: half(123);
                     height: half(57);
                    text-align: center;
                    line-height: half(57);
                    font-size: half(26);
                    color: #000000;
                }
        } 
    h1{ 
            width: r(200);
            text-align: center;
            height: 18px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #000000;
            margin:0 auto;
          margin-top: 8px;
    }
    
    .xinfeng{ 
        
        width: half(62);
        height: half(56);
        img{ 
              width: half(62);
        height: half(56);
        }
    }
    
}

section{
    position: absolute;
    top: half(105);
    bottom:half(135);
    width: r(750);
    overflow: scroll;
    -webkit-overflow-scrolling: touch;  
                .bg{
                       margin: half(25) auto 0;
                    width: r(705);
                    height: r(260);
                    img{
                        width: 100%;    
                        height: 100%;   
                    }
                }
     .comment{     
          margin:r(36) auto 0;
         width: r(666);
         height: r(180);
         position: relative;
         .com1{
                
             width: r(666);
             height: r(72);
             span:first-of-type{
                 display: block;
                 width: r(200);
                 height: r(72);
                 font-size: r(72);
                 letter-spacing: 0;
                 line-height: r(72);
                    color: #ff9344;
             }
             span:last-of-type{
                    background-color: #ff9344;
                    text-align: center;
                    border: solid 1px #ff9344;
                 display: block;
                 width: r(111);
                 height: r(59);
                 font-size: r(30);
                 line-height: r(59);
                 color: #ffffff;
                 border-radius: 10px;
             }
         }
         
         .com2{
             margin-top: r(51);
             font-size: 0;
             width: 100%;
             height: r(36);
             position: relative;
             position: absolute;
             left: 0;
             bottom: r(15);
                 span:first-of-type{ 
                     display: block;
                     padding-left:r(5) ;
                       width: r(400);
                         height: r(36);
                         font-size: r(30);
                         line-height: r(30);
                         color: #000000;
                         img{
                             vertical-align: bottom;
                             width: r(38);
                             height: r(36);
                         }
                         i{
                               font-style: normal;
                             color: #ff9344;
                         }	
                 }	 
                 span:last-of-type{
                     display: block;
                     width: r(200);
                    height:r(30);
                    font-family: MicrosoftYaHei;
                    font-size:r(26);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: r(30);
                    letter-spacing: 0px;
                    color: #8e8e8e;
                    text-align: right;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    }
                    
         }
     }
     
     
     .orange{
         margin:r(26) auto 0 ;
         width: r(664);
         height: r(67);
         background-color: #ff9344;
         span:first-of-type{
           display: block;
           margin-top: r(18);
           margin-left: r(11);
                width: r(160);
                height: r(32);
                font-family: MicrosoftYaHei;
                font-size: r(30);
                font-weight: normal;
                font-stretch: normal;
                line-height:  r(32);
                letter-spacing: 0px;
                color: #ffffff;
             
         }
          span:last-of-type{
           display: block;
        margin-top: r(5);
 
//         margin-left: r(11);
                width: r(48);
                height: r(48);
                font-family: MicrosoftYaHei;
                font-size: r(46.7);
                font-weight: normal;
                font-stretch: normal;
                line-height:  r(50);
                letter-spacing: 0px;
                color: #ffffff;
             
         }
     }
     
      
      .shanghubox{
          margin: r(11) auto 0;
          width: r(664);
          height: r(176);
          .photo{
              width: r(177);
              height:r(176);
              img{
                    width: r(177);
              height:r(176);
              }
          }
          .middle{
             
              margin: 0 auto; 
           padding-left: r(24);
              width: r(300);
              height: r(176);
              h1{
                text-overflow:ellipsis;
                white-space: nowrap;
                overflow: hidden;
                  margin-top: r(13);
                  width: r(280);
                    height: r(30);
                    font-family: MicrosoftYaHei;
                    font-size:r(30);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: r(30);
                    letter-spacing: 0px;
                    color: #000000;
              }
              h2{    
                  margin-top: r(11);
                  font-size: 0;
                   width: r(280);
                      height: r(34);
                  label{
                      width: r(36);
                      height: r(34);
                        img{
                      width: r(36);
                      height: r(34);
                      vertical-align: middle;
                     }
                      }
                      i{  
                     
                      font-style: normal;
                      font-size: r(26);
                        color: #929292;
                        }
              }
              h3{
                  margin-top: r(15);
                  width: r(280);
                        height: r(24);
                        font-family: MicrosoftYaHei;
                        font-size: r(24);
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: r(24);
                        letter-spacing: 0px;
                        color: #929292;
              }
              h4{
                  margin-top: r(22);
                  width: r(280);
                    height: r(20);
                    font-family: MicrosoftYaHei;
                    font-size: r(20);
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: r(20);
                    letter-spacing: 0px;
                    color: #ff9344;
              }
              
          }
          .text{
              margin-top: r(62);
              width: r(111);
              height: r(59);            
                border-radius: 10px;
                  border: solid 1px #ff9344;
                  overflow: hidden;
                background-color:#ff9344 ;
                  span{display: block;
                        
                      width: 100%;
                      height: 100%;     
                      line-height: r(59);
                     color: #ffffff;;
                     font-size: r(30);
                     text-align: center;
                  }
          }
      }
      
        
}

//底部
footer{ 
    position: absolute;
    bottom: 0;
    width:r(750);
    height: half(150);   
    .foot{ 
        box-sizing: border-box;
        padding-top: half(17);
        width:r(187.5);
        height: half(150);
        background: transparent;
        img{
            display: block;
            width: half(71);
            height: half(73); 
            margin:0 auto;
            margin-top: half(5);
        }
        p{ 
            
            height: half(35);
            font-size: half(25);          
            padding-top: half(10);
            text-align: center;
            a{
                color: black;
            }
           }
}
}